
<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>少年游旅行平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .pages-container {
      display: flex;
      gap: 35px;
      flex-wrap: wrap;
      max-width: 1265px;
      justify-content: center;
    }

    .app-page {
      width: 375px;
      height: 812px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .header {
      height: 56px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      z-index: 10;
    }

    .bg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .day-mode {
      background: linear-gradient(160deg, #00B4DB 0%, #0083B0 100%);
    }

    .night-mode {
      background: linear-gradient(160deg, #FF9A3D 0%, #FF6B6B 100%);
    }

    .app-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      position: relative;
      z-index: 2;
    }

    .card {
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #FF6B35, #8A2BE2);
      border-radius: 20px 20px 0 0;
    }

    .stats-display {
      font-size: 28px;
      font-weight: 700;
      color: #2C3E50;
      margin: 5px 0;
      text-align: center;
    }

    .stats-label {
      color: #5D6D7E;
      font-size: 12px;
      text-align: center;
    }

    .icon-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.3s;
    }

    .icon-btn:hover {
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.1);
    }

    .primary-btn {
      background: #FF6B35;
      color: white;
      border: none;
      border-radius: 50px;
      padding: 12px 24px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
      cursor: pointer;
      transition: all 0.3s;
    }

    .primary-btn:hover {
      background: #FF5733;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
    }

    .footer {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      z-index: 10;
      padding: 0 10px;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #5D6D7E;
      font-size: 12px;
      width: 60px;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 16px;
      padding: 8px 4px;
    }

    .nav-item:hover, .nav-item.active {
      color: #FF6B35;
      background: rgba(255, 107, 53, 0.1);
    }

    .nav-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .density-graphic {
      height: 30px;
      background: linear-gradient(90deg, #27AE60, #FF6B35, #e74c3c);
      border-radius: 15px;
      margin-top: 8px;
      position: relative;
      overflow: hidden;
    }

    .density-level {
      position: absolute;
      height: 100%;
      width: 30%;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      animation: pulse 3s infinite;
    }

    @keyframes pulse {
      0% { width: 30%; }
      50% { width: 50%; }
      100% { width: 30%; }
    }

    .ip-character {
      position: absolute;
      bottom: 90px;
      right: 20px;
      z-index: 5;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      animation: float 4s infinite ease-in-out;
    }

    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

    .flex-row {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .flex-row > div {
      flex: 1;
    }
    
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 16px;
    }
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    
    .icon-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      font-size: 24px;
      transition: all 0.3s;
    }
    
    .icon-circle:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.5);
    }
    
    .hashtag {
      display: inline-block;
      padding: 6px 16px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 20px;
      margin: 4px;
      font-size: 12px;
      transition: all 0.2s;
    }
    
    .hashtag:hover {
      background: #FF6B35;
      color: white;
      transform: scale(1.05);
    }
    
    .status-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 500;
      margin-left: 8px;
      background: rgba(139, 92, 246, 0.1);
      color: #8A2BE2;
    }

    .video-card {
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      position: relative;
    }
    
    .video-controls {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .chart-container {
      height: 160px;
      width: 100%;
      margin-top: 16px;
    }
  </style>
</head>
<body>
<div class="pages-container">
<!-- 首页 -->
<div class="app-page">
<div class="bg-layer day-mode"></div>
<div class="header">
<div class="text-xl font-bold text-[#2C3E50] flex items-center gap-2">
<span class="iconify" data-icon="mdi:compass-rose"></span>
          少年游
        </div>
<div class="flex gap-3">
<div class="icon-btn">
<span class="iconify" data-icon="mdi:microphone"></span>
</div>
<div class="icon-btn">
<span class="iconify" data-icon="mdi:bell"></span>
</div>
</div>
</div>
<div class="app-content">
<!-- AR实景导航层 -->
<div class="card">
<div class="flex items-center justify-between mb-4">
<h2 class="font-bold text-[#2C3E50]">周边探索导航</h2>
<div>
<span class="hashtag">0.5km</span>
<span class="hashtag">自然风光</span>
</div>
</div>
<div class="bg-gray-200 h-40 rounded-lg flex items-center justify-center relative overflow-hidden">
<img alt="ar navigation view with overlays" id="1" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/b514ae7b158a40dbb6ee2e91c6b2307a.jpg"/>
<div class="absolute top-3 left-3 rounded-full bg-[#FF6B35] w-6 h-6 flex items-center justify-center">
<span class="iconify text-white" data-icon="mdi:navigation-variant"></span>
</div>
<div class="absolute bottom-3 right-3 bg-black/40 px-2 py-1 rounded-full text-white text-xs">
              实时导览
            </div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-[#5D6D7E]">
<span class="iconify mr-1" data-icon="mdi:account-multiple"></span>
              当前人流密度
            </div>
<div class="density-graphic">
<div class="density-level"></div>
</div>
</div>
</div>
<!-- 智能推荐层 -->
<div class="card">
<h2 class="font-bold text-[#2C3E50] mb-4">为你推荐</h2>
<div class="flex overflow-x-auto gap-4 pb-2 -mx-2 px-2 hide-scrollbar">
<div class="flex-shrink-0 w-48 bg-gray-200 h-60 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-4">
<div class="font-bold text-white text-lg">青城山徒步</div>
<div class="flex items-center text-white text-xs mt-1">
<span class="iconify mr-1" data-icon="mdi:heart"></span>
                  86%匹配度
                </div>
</div>
<img alt="recommended destination qingcheng mountain" id="2" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/ebcdf774888e4fafba133ac982999624.jpg"/>
</div>
<div class="flex-shrink-0 w-48 bg-gray-200 h-60 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-4">
<div class="font-bold text-white text-lg">洱海骑行</div>
<div class="flex items-center text-white text-xs mt-1">
<span class="iconify mr-1" data-icon="mdi:heart"></span>
                  92%匹配度
                </div>
</div>
<img alt="recommended destination erhai lake cycling" id="3" src="/agent/placeholder.svg"/>
</div>
</div>
<div class="mt-4">
<div class="font-medium text-[#5D6D7E]">旅行搭子匹配</div>
<div class="flex gap-3 mt-2">
<div class="w-10 h-10 rounded-full overflow-hidden">
<img alt="travel buddy avatar" id="4" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/a072833f65dd43bcb77fb6c9ec204c58.jpg"/>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden">
<img alt="travel buddy avatar" id="5" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/097c5924775e4d938d7946d355b26375.jpg"/>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden">
<img alt="travel buddy avatar" id="6" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/ff8a6d0c43eb49e9bc672fd38798c20b.jpg"/>
</div>
<div class="w-10 h-10 bg-[#FF6B35] rounded-full flex items-center justify-center text-white">
                +3
              </div>
</div>
</div>
</div>
<!-- 快捷功能层 -->
<div class="card">
<h2 class="font-bold text-[#2C3E50] mb-4">旅行工具箱</h2>
<div class="icon-grid">
<div class="icon-item">
<div class="icon-circle" style="color: #FF6B35;">
<span class="iconify" data-icon="mdi:airplane"></span>
</div>
<span>机票</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #8A2BE2;">
<span class="iconify" data-icon="mdi:home"></span>
</div>
<span>民宿</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #27AE60;">
<span class="iconify" data-icon="mdi:food"></span>
</div>
<span>美食</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #00B4DB;">
<span class="iconify" data-icon="mdi:ticket"></span>
</div>
<span>景点</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #FF9A3D;">
<span class="iconify" data-icon="mdi:calendar"></span>
</div>
<span>行程</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #FF6B6B;">
<span class="iconify" data-icon="mdi:weather-partly-cloudy"></span>
</div>
<span>天气</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #9B59B6;">
<span class="iconify" data-icon="mdi:wallet"></span>
</div>
<span>支付</span>
</div>
<div class="icon-item">
<div class="icon-circle" style="color: #3498db;">
<span class="iconify" data-icon="mdi:dots-horizontal"></span>
</div>
<span>更多</span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="nav-item active">
<span class="nav-icon iconify" data-icon="mdi:compass"></span>
          探索
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:map-marker-path"></span>
          行程
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:account-group"></span>
          社区
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:account-circle"></span>
          我的
        </div>
</div>
<div class="ip-character">
<span class="iconify" data-icon="mdi:alien" style="font-size: 36px; color: #8A2BE2;"></span>
</div>
</div>
<!-- 行程规划页 -->
<div class="app-page">
<div class="bg-layer day-mode"></div>
<div class="header">
<div class="flex items-center gap-2">
<div class="icon-btn">
<span class="iconify" data-icon="mdi:arrow-left"></span>
</div>
<h2 class="font-bold text-lg text-[#2C3E50]">我的行程</h2>
</div>
<div class="flex gap-3">
<div class="icon-btn" style="background: rgba(138, 43, 226, 0.1);">
<span class="iconify" data-icon="mdi:robot" style="color: #8A2BE2;"></span>
</div>
</div>
</div>
<div class="app-content">
<!-- 时间轴 -->
<div class="card">
<h2 class="font-bold text-[#2C3E50] mb-4">五日行程计划</h2>
<div class="relative pl-6 border-l-2 border-[#8A2BE2]">
<div class="mb-6 relative">
<div class="absolute -left-9 w-6 h-6 rounded-full bg-[#8A2BE2] flex items-center justify-center">
<span class="iconify text-white text-sm" data-icon="mdi:calendar-today"></span>
</div>
<div class="pl-2">
<div class="font-bold">Day 1 · 成都</div>
<div class="text-sm text-[#5D6D7E] mt-1">
<div>10:00 熊猫基地</div>
<div>14:00 宽窄巷子</div>
<div>19:00 锦里夜景</div>
</div>
</div>
</div>
<div class="mb-6 relative">
<div class="absolute -left-9 w-6 h-6 rounded-full bg-white border-2 border-[#8A2BE2]"></div>
<div class="pl-2">
<div class="font-bold">Day 2 · 都江堰</div>
<div class="text-sm text-[#5D6D7E] mt-1">
<div>09:00 都江堰水利工程</div>
<div>15:00 青城山</div>
</div>
</div>
</div>
<div class="mb-6 relative">
<div class="absolute -left-9 w-6 h-6 rounded-full bg-white border-2 border-[#8A2BE2]"></div>
<div class="pl-2">
<div class="font-bold">Day 3 · 乐山</div>
<div class="text-sm text-[#5D6D7E] mt-1">
<div>全天 乐山大佛游览</div>
</div>
</div>
</div>
</div>
<button class="primary-btn w-full mt-4">
            优化行程路线
          </button>
</div>
<!-- 实时预测面板 -->
<div class="card">
<h2 class="font-bold text-[#2C3E50] mb-4">出行预测</h2>
<div class="flex-row">
<div class="card" style="background: transparent; padding: 12px; margin: 0;">
<div class="text-center">
<span class="iconify text-2xl mb-2" data-icon="mdi:weather-sunny" style="color: #27AE60;"></span>
<div class="stats-display">26°C</div>
<div class="stats-label">明日天气</div>
</div>
</div>
<div class="card" style="background: transparent; padding: 12px; margin: 0;">
<div class="text-center">
<span class="iconify text-2xl mb-2" data-icon="mdi:account-group" style="color: #FF6B35;"></span>
<div class="stats-display">72%</div>
<div class="stats-label">人流密度</div>
</div>
</div>
<div class="card" style="background: transparent; padding: 12px; margin: 0;">
<div class="text-center">
<span class="iconify text-2xl mb-2" data-icon="mdi:car" style="color: #00B4DB;"></span>
<div class="stats-display">45min</div>
<div class="stats-label">交通时长</div>
</div>
</div>
</div>
<div class="mt-4">
<div class="chart-container" id="forecast-chart"></div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-[#5D6D7E]">
<span class="iconify mr-1" data-icon="mdi:lightbulb-on"></span>
              AI建议：推荐上午10点前到达熊猫基地避开高峰
            </div>
</div>
</div>
<!-- 社交匹配 -->
<div class="card">
<h2 class="font-bold text-[#2C3E50] mb-4">同行推荐</h2>
<div class="flex items-center gap-4">
<div class="relative">
<div class="w-16 h-16 rounded-full overflow-hidden">
<img alt="recommended travel companion" id="7" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/aa64f9334f80466e857cbf91beca96a5.jpg"/>
</div>
<div class="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-[#27AE60] border-2 border-white"></div>
</div>
<div>
<div class="font-bold">旅行达人 · 小雅</div>
<div class="text-sm text-[#5D6D7E]">
<span class="iconify align-text-bottom mr-1" data-icon="mdi:star"></span>
                4.9 · 25条旅行笔记
              </div>
<div class="mt-1">
<span class="hashtag">摄影</span>
<span class="hashtag">徒步</span>
<span class="hashtag">美食</span>
</div>
</div>
</div>
<div class="flex gap-2 mt-4">
<button class="flex-1 bg-gray-100 rounded-full py-2 text-[#5D6D7E]">稍后邀请</button>
<button class="flex-1 primary-btn">立即邀请</button>
</div>
</div>
</div>
<div class="footer">
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:compass"></span>
          探索
        </div>
<div class="nav-item active">
<span class="nav-icon iconify" data-icon="mdi:map-marker-path"></span>
          行程
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:account-group"></span>
          社区
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:account-circle"></span>
          我的
        </div>
</div>
<div class="ip-character">
<span class="iconify" data-icon="mdi:robot" style="font-size: 36px; color: #8A2BE2;"></span>
</div>
</div>
<!-- 社区页面 -->
<div class="app-page">
<div class="bg-layer night-mode"></div>
<div class="header">
<div class="font-bold text-lg text-[#2C3E50]">旅行社区</div>
<div class="flex gap-3">
<div class="icon-btn">
<span class="iconify" data-icon="mdi:magnify"></span>
</div>
<div class="icon-btn" style="background: rgba(255, 107, 53, 0.1);">
<span class="iconify" data-icon="mdi:plus" style="color: #FF6B35;"></span>
</div>
</div>
</div>
<div class="app-content">
<!-- 标签云 -->
<div class="card">
<div class="flex overflow-x-auto gap-2 pb-2 hide-scrollbar">
<span class="hashtag" style="background: #FF6B35; color: white;">#城市漫步</span>
<span class="hashtag">#小众秘境</span>
<span class="hashtag">#美食探店</span>
<span class="hashtag">#自驾之旅</span>
<span class="hashtag">#背包客</span>
<span class="hashtag">#情侣出游</span>
<span class="hashtag">#摄影圣地</span>
<span class="hashtag">#避暑胜地</span>
</div>
</div>
<!-- 短视频瀑布流 -->
<div>
<div class="video-card">
<div class="bg-gray-200 h-64 flex items-center justify-center">
<img alt="user generated travel video" id="8" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/f5af435f58974814bd3b7b621f2c5c56.jpg"/>
</div>
<div class="video-controls">
<div class="text-white font-medium">丽江古城实时打卡</div>
<div>
<span class="iconify text-white mr-3" data-icon="mdi:heart"></span>
<span class="iconify text-white" data-icon="mdi:comment"></span>
</div>
</div>
</div>
<div class="flex items-center justify-between px-2 mb-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full overflow-hidden mr-2">
<img alt="user avatar" id="9" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/4fd9c3ea1a3a4feb914e927c4c94afb5.jpg"/>
</div>
<div>
<div class="font-bold">旅行摄影师-Mike</div>
<div class="text-sm text-[#5D6D7E]">2小时前 · 丽江</div>
</div>
</div>
<div class="bg-[#27AE60] text-white px-2 py-1 rounded-lg text-xs flex items-center">
<span class="iconify mr-1" data-icon="mdi:spotlight"></span>
              实时直播中
            </div>
</div>
<div class="px-2 mb-6">
<p class="text-[#5D6D7E] mb-3">清晨的丽江古城少了游客的喧嚣，四方街上纳西族的舞蹈和流水潺潺声组成了最美的晨曲...</p>
<div class="flex">
<button class="flex items-center text-[#5D6D7E] mr-4">
<span class="iconify mr-1" data-icon="mdi:heart-outline"></span>
                368
              </button>
<button class="flex items-center text-[#5D6D7E]">
<span class="iconify mr-1" data-icon="mdi:comment-outline"></span>
                42
              </button>
</div>
</div>
</div>
<div>
<div class="video-card">
<div class="bg-gray-200 h-64 flex items-center justify-center">
<img alt="user generated travel video" id="10" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/f47c195374d542cc9f48932089454a37.jpg"/>
</div>
<div class="video-controls">
<div class="text-white font-medium">三亚海鲜市场大揭秘</div>
<div>
<span class="iconify text-white mr-3" data-icon="mdi:heart"></span>
<span class="iconify text-white" data-icon="mdi:comment"></span>
</div>
</div>
</div>
<div class="flex items-center justify-between px-2 mb-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full overflow-hidden mr-2">
<img alt="user avatar" id="11" src="/agent-py/workspace/6909e3a892eac8d377c0d25b/generated_images/63b43c78581b4b26a58725eadbb2d465.jpg"/>
</div>
<div>
<div class="font-bold">美食探员小志</div>
<div class="text-sm text-[#5D6D7E]">5小时前 · 三亚</div>
</div>
</div>
<div class="status-badge">
<span class="iconify mr-1" data-icon="mdi:check-decagram"></span>
              认证美食家
            </div>
</div>
</div>
</div>
<div class="footer">
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:compass"></span>
          探索
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:map-marker-path"></span>
          行程
        </div>
<div class="nav-item active">
<span class="nav-icon iconify" data-icon="mdi:account-group"></span>
          社区
        </div>
<div class="nav-item">
<span class="nav-icon iconify" data-icon="mdi:account-circle"></span>
          我的
        </div>
</div>
<div class="ip-character">
<span class="iconify" data-icon="mdi:camera" style="font-size: 36px; color: #FF6B35;"></span>
</div>
</div>
</div>
<script>
    // 生成预测图表
    document.addEventListener('DOMContentLoaded', function() {
      const forecastChart = echarts.init(document.getElementById('forecast-chart'));
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['人流量预测', '适宜度指数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人流量预测',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#8A2BE2',
              width: 3
            },
            symbol: 'circle',
            symbolSize: 8,
            data: [320, 732, 901, 1254, 1490, 1680]
          },
          {
            name: '适宜度指数',
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#27AE60',
              width: 3
            },
            symbol: 'circle',
            symbolSize: 8,
            data: [820, 932, 701, 934, 890, 730]
          }
        ]
      };
      
      forecastChart.setOption(option);
      
      // 自适应图表大小
      window.addEventListener('resize', () => {
        forecastChart.resize();
      });
    });
  </script>
</body>
</html>
